<template>
  <el-table v-loading="loading" border :data="tableData" max-height="570px">
      <el-table-column prop="name" label="商品" width="150" />
      <el-table-column prop="number" label="数量" width="150" />
      <el-table-column prop="price" label="单价" width="150" />
      <el-table-column prop="groupPrice" label="团购价" width="150" />
      <el-table-column prop="peoples" label="当前拼团人数" width="150"/>
      <el-table-column prop="total" label="总价" width="150"/>
      <el-table-column prop="groupTotal" label="拼团总价" width="150"/>
      <el-table-column prop="createTime" label="加入购物车日期" width="240" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="warning" size="mini" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
          <el-button type="warning" size="mini" @click="addOrder(scope.$index, scope.row)">
            开始拼单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
import { getList, deleteCart } from '@/api/cart'
import { recordLog } from '@/api/recordLog'
import { addOrder } from "@/api/order";

export default {
  name: 'Cart',
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      getList({ username: this.$store.getters.username }).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    handleDelete(index, row) {
      this.$confirm(`是否删除${row.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCart({ id: row.id }).then(response => {
          recordLog({ username: this.$store.getters.username, operate: `删除购物车:${row.name}` })
          this.$message({
            type: 'success',
            message: '删除成功',
            center: true
          })
          this.fetchData()
        })
      })
    },
    addOrder(index,row){
      let phoneNumber = this.$store.getters.phoneNumber
      let username = this.$store.getters.username
      if (phoneNumber==='' || phoneNumber===null){
        this.$message({
          type: 'warning',
          message: '请先完善电话号码信息',
          center: true
        })
        return
      }
      const order = {
        name: row.name,
        number: row.number,
        price: row.price,
        groupPrice: row.groupPrice,
        total: row.total,
        groupTotal: row.groupTotal,
        payType: '拼团',
        status: 0,
        phoneNumber: phoneNumber,
        username: username
      }
      addOrder(order).then(res => {
        recordLog({ username: this.$store.getters.username, operate: `提交订单` })
        this.$message({
          type: 'success',
          message: '拼团成功',
          center: true
        })
        this.fetchData()
      })
    }
  }
}
</script>

<style scoped>
.el-button--warning.is-active,
.el-button--warning:active {
  background: #4d4c50;
  border-color: #4d4c50;
  color: #fff;
}

.el-button--warning:focus,
.el-button--warning:hover {
  background: #575559;
  border-color: #575559;
  color: #fff;
}

.el-button--warning {
  color: #FFF;
  background-color: #4d4c50;
  border-color: #4d4c50;
}
</style>
